<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide  v-for="(item,key) in page" :key="key">
        <div class="icons-item" 
        v-for="page in item" 
        :key="page.id"> 
            <img :src="page.imgUrl" alt="">
            <p>{{page.title}}</p>
        </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
export default {
    data (){
        return {
              swiperOption:{
                     loop:true
              },

            iconsList:[
                {
                    id:"01",
                    imgUrl:"",
                    title:"景点门票"
                }
            ]
        }
    },
    computed:{
        page (){
            let pages=[];
            this.iconsList.forEach((item,index)=>{
                let idx=Math.floor(index/8);
                if(!pages[idx]) pages[idx]=[];
                pages[idx].push(item)
            })
            return pages;
        }
    }
}
</script>
<style scoped lang='stylus'>
@import '~css/common.styl';

.icons-item{
    width: 25%;
    padding-bottom:25% ;
    height: 0;
    float: left;
    background: #fff;
   
}
.icons-item img{
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    margin: 0 auto;
    padding-top: .1rem;    

}
.icons-item p{
   margin-top: .1rem;
  font-size:.28rem;
  text-align: center;
  color:#212121;
  textOverflow();
  
}
</style>>

